<template>
    <div class="nav-item">
        <el-row :gutter="0">
            <el-col :xs="0" :sm="3" :md="4" :lg="5" :xl="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="0" :sm="18" :md="16" :lg="14" :xl="12">
                <div class="grid-content bg-purple-light">
                    <div class="grid-content">
                        <div class="hot">
                            <ul>
                                <li>
                                    <span>Hot</span>
                                </li>
                                <li>
                                    <a href="#">推荐1</a>
                                </li>
                                <li>
                                    <a href="#">推荐2</a>
                                </li>
                                <li>
                                    <a href="#">推荐3</a>
                                </li>
                                <li>
                                    <a href="#">推荐4</a>
                                </li>
                                <li>
                                    <a href="#">推荐5</a>
                                </li>
                                <li>
                                    <a href="#">推荐6</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </el-col>

            <el-col :xs="0" :sm="3" :md="4" :lg="5" :xl="6">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup() {


        return {}
    }
})
</script>

<style scoped>
.nav-item {
    border-bottom: 1px solid #f1f1f1;
    margin-bottom: 1px;
    background: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}
.hot > ul > li {
    float: left;
}
.hot > ul > li > a,
span {
    text-decoration: none;
    color: #797979;
    font-size: 1rem;
    padding: 0 1rem;
    line-height: 3rem;
    font-size: 1rem;
}

.hot > ul > li > a:hover {
    color: #0aa2e9;
}

.hot span {
    color: red;
    padding: 0 1rem 0 0;
}
</style>